<template>
  <page-header-wrapper>
    <a-card
      :bordered="true"
      :hoverable="true">
      <a-tabs
        default-active-key="1"
        :animated="false"
        @change="handleTabs">
        <a-tab-pane key="1" forceRender tab="城市概况">
          <view-city
            style="height: 900px"
            v-if="activeKey === '1' && caseId !== 0"
            ref="viewCity"
            :case-id="caseId"
            :cityLevelOptions="cityLevelOptions"
            :linesLevelOptions="linesLevelOptions" />
        </a-tab-pane>
        <a-tab-pane key="2" force-render tab="商圈概况">
          <view-area
            style="height: 1010px"
            v-if="activeKey === '2' && caseId !== 0"
            ref="viewCity"
            :case-id="caseId">
          </view-area>
        </a-tab-pane>
        <a-tab-pane key="3" tab="功能布局">
          <view-layout
            style="height: 900px"
            v-if="activeKey === '3' && caseId !== 0"
            ref="=viewLayout"
            :case-id="caseId"
          />
        </a-tab-pane>
        <a-tab-pane key="4" tab="人员列表">
          Content of Tab Pane 4
        </a-tab-pane>
        <a-tab-pane key="5" tab="设备列表">
          Content of Tab Pane 5
        </a-tab-pane>
        <a-tab-pane key="6" tab="案例背景">
          Content of Tab Pane 6
        </a-tab-pane>
        <a-tab-pane key="7" tab="题库设置">
          Content of Tab Pane 7
        </a-tab-pane>
        <a-button slot="tabBarExtraContent" @click="back">
          返回
        </a-button>
      </a-tabs>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import ViewCity from './ViewCity'
import ViewArea from './ViewArea'
import ViewLayout from './ViewLayout'

export default {
  name: 'CaseViewForm',
  components: {
    ViewCity,
    ViewArea,
    ViewLayout
  },
  props: {},
  data () {
    return {
      // 选中面板
      activeKey: '1',
      // 城市名称字典
      cityLevelOptions: [],
      // 城市线级字典
      linesLevelOptions: [],
      // 案例主键
      caseId: 0
    }
  },
  created () {
    const caseId = this.$route.params && this.$route.params.caseId
    if (caseId) {
      this.caseId = caseId
    } else {
      this.back()
    }
    this.getDicts('city_level').then(response => {
      this.cityLevelOptions = response.data
    })
    this.getDicts('lines_level').then(response => {
      this.linesLevelOptions = response.data
    })
  },
  methods: {
    /** 返回列表 */
    back () {
      this.$router.push({ path: '/instance/case' })
    },
    /** 面板切换 */
    handleTabs (activeKey) {
      this.activeKey = activeKey
    }
  }
}
</script>

<style scoped>

</style>
